import { Button, Modal, Result, Table, Typography } from 'antd';
import React from 'react';

const { Text } = Typography;

const columns = [
  {
    title: '流程名称',
    dataIndex: 'processName',
    width: '30%',
  },
  {
    title: '流程编码',
    dataIndex: 'processCode',
    width: '40%',
  },
  {
    title: '导入结果',
    dataIndex: 'success',
    width: '10%',
    render: success =>
      success ? (
        <span className="text-success">成功</span>
      ) : (
        <span className="text-danger">失败</span>
      ),
  },
  {
    title: '异常信息',
    dataIndex: 'message',
    width: '20%',
    render: (message, record) =>
      !record.success && (
        <Text ellipsis copyable>
          {message}
        </Text>
      ),
  },
];

function ImportResultModal({ data, closeSelf, closeParent, visible }) {
  const allSuccess = data.every(e => e.success);

  return (
    <Modal footer={null} width={800} visible={visible} onCancel={closeSelf} destroyOnClose>
      <Result
        status={allSuccess ? 'success' : 'warning'}
        title={allSuccess ? '全部流程导入成功' : '部分流程导入失败'}
        extra={[
          <Table
            bordered
            dataSource={data}
            columns={columns}
            pagination={{ defaultPageSize: 5 }}
          />,
          <Button
            type="primary"
            onClick={() => {
              closeSelf();
              if (allSuccess) {
                closeParent();
              }
            }}
          >
            关闭
          </Button>,
        ]}
      />
    </Modal>
  );
}

export default ImportResultModal;
